<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="./css/index.css" rel="stylesheet">
  <style>
    h1 {
      color: #000;
    }

    svg {
      min-width: 600px;
      min-height: 400px;
      overflow: auto;
    }
  </style>
</head>
<body>
<h1>SVG Animation</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" begin="0s"
             dur="5s" repeatCount="indefinite" fill="freeze" from="1" to="0"/>
  </rect>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/>
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"/>
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"/>
    <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>
  </rect>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="100" style="font-family:Verdana;font-size:24px"> It's SVG!
      <animateMotion path="M 0,0 q 150,-300 300,0" repeatCount="indefinite" dur="5s" fill="freeze"/>
    </text>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s"
                        dur="5s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum"
                        begin="1s" dur="5s" fill="freeze"/>
    </text>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime">
    <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0"/>
    <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>
    <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800"/>
    <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300"/>
    <animateColor attributeName="fill" attributeType="CSS" from="lime" to="red" begin="2s" dur="4s" fill="freeze"/>
  </rect>
  <g transform="translate(100,100)">
    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG!
      <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
      <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze"/>
      <animateColor attributeName="fill" attributeType="CSS" from="red" to="blue" begin="1s" dur="5s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s"
                        dur="5s" fill="freeze"/>
      <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum"
                        begin="1s" dur="5s" fill="freeze"/>
    </text>
  </g>
</svg>

<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="./js/d3.v4.min.js"></script>
<script src="./js/svg.js"></script>
</body>
</html>